<template lang='pug'>
    div.decorateContainer 
        img.storeBg(src='/img/tyy/storeBg.png')
        ul.decorateNav
            li(v-for='item,index in list' :key='item.id' :class='{active:(curIndex==index)}' @click='toggle(index)') 
                span {{item.text}}
        ul.storeNav
            li
                div.storeL
                    img(src='')
                    div.storeTitle
                        h3 adidas
                        p 官方旗舰店
                div.storeR 1810.2km

</template>
<script>
export default{
    data() {
        return {
            list: [{
                id:'1',
                text:'综合'
            },{
                id:'2',
                text:'人气'
            },{
                id:'3',
                text:'距离'
            }],
            curIndex:0
        }
    },
    methods:{
        toggle(index){
            this.curIndex = index
        }
    },
    mounted(){
        // this.$axios.get('/api/hydrosList').then(res=>{
        //     console.log(res)
        // })
        // this.$axios.get('/api/list').then(res=>{
        //     console.log(res)
        // })
    }
}
</script>
<style scoped lang='scss'>
    .decorateContainer{
        width:100vw;
        .storeBg{
            width:100%;
            height:2.4rem;
        }
        .decorateNav{
            width:100vw;
            height:0.86rem;
            display:flex;
            align-items:center; 
            border-bottom:1px solid #f5f5f5;
            li{
                width:2.5rem;
                height:0.86rem;
                line-height:0.86rem;
                &:last-child span{
                    border-right:none;
                }
                span{
                    display:inline-block;
                    height:0.4rem;
                    line-height:0.4rem;
                    text-align:center;
                    font-size:0.2rem;
                    color:#9b9b9b;
                    border-right:1px solid #9b9b9b;
                    text-align:center;
                    width:2.5rem;
                }
                &.active{ 
                    border-bottom:0.04rem solid #6bbce2;
                    span{
                        color:#6bbce2;
                    }
                }
            }
        }
        .storeNav{
            width:100vw;
            li{
                height:1.8rem;
                padding:0.3rem;
                display:flex;
                align-items:center;
                justify-content: space-between;
                border-bottom:1px solid #e4e4e4;
                .storeL{
                    display:flex;
                    align-items:center;
                    img{
                        width:1.16rem;
                        height:1.16rem;
                        margin-right:0.3rem;
                    }
                    .storeTitle{

                        h3{
                            font-size:0.3rem;
                            color:#343434;
                            margin-bottom:0.12rem;
                        }
                        p{
                            font-size:0.22rem;
                            color:#959595;
                        }
                    }
                }
                .storeR{
                    font-size:0.2rem;
                    color:#8f8f8f;
                }
                
            }
        }
    }
</style>
